<template>
    <div>
        <img :src="lesson.img" alt="{{lesson.title}}">
        <!-- <h3 @dblclick="isShow = true">
            <input 
                v-if="isShow"
                type="text"
                :value="lesson.title"
                @input="$emit('update:modelValue',$event.target.value)"
                @blur="isShow = false"
                @keyup.enter="isShow = false" />
            <strong v-else>{{lesson.title}}</strong>
        </h3> -->
        <h3 @dblclick="isShow = true">
            <input 
                v-if="isShow"
                type="text"
                :value="lesson.title"
                @input="changeTitle"
                @blur="isShow = false"
                @keyup.enter="isShow = false" />
            <strong v-else>{{lesson.title}}</strong>
        </h3>
        <h3 @dblclick="isPriceShow = true">
            <input 
                v-if="isPriceShow"
                type="text"
                :value="lesson.price"
                @input="$emit('update:price',$event.target.value)"
                @blur="isPriceShow = false"
                @keyup.enter="isPriceShow = false" />
            <strong v-else>{{lesson.price}}</strong>
        </h3>
        <!-- <span v-bind="$attrs">x</span> -->
        <!-- <span @click="$emit('del',lesson)">x</span> -->
        <span @click="del">x</span>
    </div>
</template>

<script>
    export default {
        inheritAttrs:false,
        // props:["lesson","modelValue","price"],
        props:["lesson","title","price","titleModifiers"],
        // emits:['del'],  //可以是数组
        emits:{
            // 'update:modelValue':null,
            'update:title':null,
            'update:price':null,
            del(v){
                if(/^\d+$/.test(v)){
                    return true;
                }
                throw new Error('del emit 需要数值参数');
            }
        },
        data(){
            return{
                isShow:false,
                isPriceShow:false
            }
        },
        methods:{
            // del(){
            //     if(confirm('确定删除吗？')){
            //         this.$emit('del',this.lesson);
            //     }
            // }
            del(){
                if(confirm('确定删除吗？')){
                    this.$emit('del',this.lesson.id);
                }
            },
            changeTitle($event){
                let val = $event.target.value;
                if(this.titleModifiers.toupper){
                    val = val.toUpperCase();
                }
                const substr = Object.keys(this.titleModifiers).find(v => /^substr_/.test(v));
                if(substr){
                    let info = substr.split('_');
                    val = val.substr(0, info[1]);
                }
                this.$emit('update:title',val);
            }
        }
    }
</script>

<style lang="scss" scoped>
    div{
        border: 1px solid #ddd;
        text-align: center;
        position: relative;
        transition:1s;
        &:hover{
            box-shadow: 0 0 20px #aaa;
             > span{
                opacity: 1;
            }
        }
        h3{
            margin:0;
            padding:0 0 10px;
        }
        img{
            width:100%;
            height:210px;
        }
        span{
            width:20px;
            height: 20px;
            background-color:#333;
            color:#fff;
            border-radius: 50%;
            cursor:pointer;
            font-size:12px;
            display: flex;
            justify-content:center;
            align-items:center;
            position:absolute;
            top: 10px;
            right: 10px;
            opacity: 0;
            transition:1s;
        }
    }
</style>